<template>
  <div>
    <p :style="{opacity}">React真难啊 学不会</p>
    <button @click="destroy">干掉他 我们一起学vue</button>
  </div>
</template>

<script>
export default {
  name:'App',
  data(){
    return{
      opacity:1,
      timer:null
    }
  },
  methods: {
    destroy(){
      //完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
      this.$destroy()
    }
  },
  mounted(){
    // 生命周期函数中的this指向组件实例
    console.log(this);
    this.timer = setInterval(() => {
      this.opacity -= 0.1;

      if (this.opacity<=0){
        this.opacity=1
      }
      console.log(111);
    }, 200);
  },

  beforeDestroy(){
    clearInterval(this.timer)
  }
}
</script>

<style>

</style>